<template>
    <van-cell-group inset>
        <van-field v-model="title" label="标题" placeholder="请输入标题" />
    </van-cell-group>
    <section>
      <textarea
              v-model="innerContent"
              class="word"
              placeholder="请输入你的内容...."></textarea>
    </section>
    <van-field name="radio" label="权限" style="margin-top: 100px;font-size: 20px;font-weight: bold;margin-left: 200px;">
        <template #input >
            <van-radio-group v-model="posterStatus" direction="horizontal" style="padding-left: 200px">
                <van-radio name="0">公开</van-radio>
                <van-radio name="1">好友可见</van-radio>
                <van-radio name="2">队伍伙伴可见</van-radio>
            </van-radio-group>
        </template>
    </van-field>
    <div style="margin: 16px;">
        <van-button style="margin-top: 50px" round block type="primary" native-type="submit" @click="doCreatePost">
            提交
        </van-button>
    </div>
</template>

<script setup lang="ts">
    import { Quill, QuillEditor } from '@vueup/vue-quill';
    import '@vueup/vue-quill/dist/vue-quill.snow.css'; //snow主题使用次样式
    // import '@vueup/vue-quill/dist/vue-quill.bubble.css'; //bubble主题使用次样式
    import ImageUploader from 'quill-image-uploader';
    import { computed, getCurrentInstance, ref } from 'vue';
    import myAxois from "../plugin/MyAxios";
    import {showFailToast} from "vant";
    import {useRouter} from "vue-router";

    const router = useRouter();

    const title = ref('');
    const posterStatus = ref(0);

    const innerContent = ref('')
    // const innerContent = computed({
    //     get() {
    //         return props.content;
    //     },
    //     set(value) {
    //         emit('update:content', value);
    //     }
    // });
    const doCreatePost = async () =>{
        const res = await myAxois.post("/poster/create",{
            content:innerContent.value,
            title:title.value,
            status:posterStatus.value
        });
        if(res.data.code === 0){
            showFailToast("创建成功")
            router.push("/poster")
        }else{
            showFailToast("创建失败")
        }
    }

    // const handleUpdate = (content) => {
    //     console.log(content, innerContent.value);
    // };
</script>

<style scoped>
    .word {
        display: block;
        width: 80%;
        height: 200px;
        overflow: auto;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        margin-left: 130px;
    }
</style>